<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-form-item prop="account">
          <el-input v-model="filters.account" placeholder="用户账号"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="filters.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="max_integra">
          <el-input
            v-model="filters.max_integra"
            placeholder="最大积分价值"
          ></el-input>
        </el-form-item>
        <el-form-item prop="min_integra">
          <el-input
            v-model="filters.min_integra"
            placeholder="最小积分价值"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh" :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div
      class="toolbar"
      style="float:right;padding-top:10px;padding-right:15px;"
    >
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button
                icon="fa fa-refresh"
                @click="findPage(null)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button
                icon="fa fa-filter"
                @click="displayFilterColumnsDialog"
              ></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      :showBatchDelete="false"
      :showOperation="true"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="true"
      @handleDetail="handleDetail"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>

    <!--详情查看-->
    <el-dialog
      title="详情查看"
      width="60%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-form :inline="true" :model="filters" ref="filters" :size="size">
          <el-form-item prop="account">
            <el-date-picker
              v-model="filters.max_update_time"
              type="date"
              placeholder="积分变动时间"
            ></el-date-picker
            >至
            <el-date-picker
              v-model="filters.min_update_time"
              type="date"
              placeholder="积分变动时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="type">
            <el-select
              v-model="filters.type"
              style="width:200px"
              placeholder="变动类型"
            >
              <el-option
                v-for="item in type"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh" :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-form>
        <div>
          <el-form
            :model="dataForm"
            :inline="true"
            label-width="80px"
            ref="dataForm"
            :size="size"
          >
            <el-form-item label="用户名：" prop="user_id">
              <el-input
                v-model="dataForm.user_id"
                :disabled="true"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
              <el-input
                v-model="dataForm.phone"
                :disabled="true"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="detail" label="积分变动详情"></el-table-column>
          <el-table-column prop="source" label="渠道"></el-table-column>
          <el-table-column prop="integra" label="变动积分"></el-table-column>
          <el-table-column prop="balance" label="	余额"></el-table-column>
          <el-table-column
            prop="update_time"
            label="	积分变动时间"
          ></el-table-column>
          <el-table-column prop="status" label="	积分状态"></el-table-column>
        </el-table>
        <div style="padding-top: 20px;">
          <el-button :size="size" @click.native="dialogVisible = false">{{
            $t("action.cancel")
          }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      tableData: [
        {
          detail: "积分解冻",
          source: "	BBC",
          integra: "	-20",
          balance: "	40",
          update_time: "2019-12-23 20:22:23",
          status: "	正常"
        },
        {
          detail: "会员消费",
          source: "		BBC",
          integra: "		+20",
          balance: "		40",
          update_time: "	2019-12-23 20:21:45",
          status: "	正常"
        }
      ],
      type: [
        { key: 0, value: "全部" },
        { key: 1, value: "会员主动营销送积分" },
        { key: 2, value: "登录签到" },
        { key: 3, value: "完善个人资料" },
        { key: 4, value: "分享商品" },
        { key: 5, value: "会员消费" },
        { key: 6, value: "购买抵现" }
      ],
      filters: {
        phone: "",
        account: "",
        max_integra: "",
        min_integra: "",
        res: {
          total: 3,
          code: "0000",
          rows: [
            {
              user_id: "1912240002865169",
              account: "zhangsan",
              phone: "18815791864",
              now_integra: "5",
              un_integra: "0"
            },

            {
              user_id: "1912230010122564",
              account: "lisi",
              phone: "13811112222",
              now_integra: "	40",
              un_integra: "0"
            },
            {
              user_id: "1912160008055243",
              account: "wanger",
              phone: "	15210256910",
              now_integra: "	190",
              un_integra: "	-131920"
            }
          ]
        }
      },
      columns: [],
      dialogVisible: false,
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      dataForm: {}
    };
  },

  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.$refs.CyTable.findPageStaticState(this.filters);
    },
    // 提现状态初始化
    queryUserList() {
      var that = this;
      let param = {};
      param.t = "sysConfig";
      param.type = "apply_cash_status";
      this.utils.request.queryUserList(param, function(data) {
        that.list = data.data;
      });
    },

    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "提现申请";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    },

    handleDetail: function(data) {
      this.dialogVisible = true;
      this.dataForm = data.row;
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "user_id", label: "用户ID", minWidth: 120 },
        { prop: "account", label: "用户账号", minWidth: 120 },
        { prop: "phone", label: "手机号", minWidth: 120 },
         { prop: "un_integra", label: "冻结积分值", minWidth: 120 },
        { prop: "now_integra", label: "当前积分值", minWidth: 150 }
       
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.findPage();
    }
  },
  mounted() {
    this.initColumns();
    this.queryUserList();
  }
};
</script>

<style scoped>
/deep/ .el-input__inner   {
  width: 200px !important;
}
</style>